<template>
	<view class="all" :style="{
		padding: '30rpx',
		'background-color': '#F4F4F4',
		height: $height()+'px'
	}
	">
		<u-navbar :is-back="true" title="我的傭金" title-bold :background="background" />
		<view class="carp">
			<view class="carp_1">
				<view class="carp_1_2">
					<image src="https://junhe-project.oss-cn-beijing.aliyuncs.com/img/2022-03-08/164672537997528.png" />
					<view class="carp_1_3">
						<text>我的傭金</text>
						<text>20000</text>
					</view>
				</view>
				<view class="carp_1_4" @click="show=true">
					我的下級
				</view>
			</view>
			<view class="carp2">
				<text>纍計傭金：50000 </text>
				<text>纍計提現：30000</text>
			</view>
		</view>
		<view class="sx" @click="$to('/pagesA/comMission/withdrawal')">
			提现
		</view>
		<view class="body">
			<view class="body_1">
				<text :style="{
					color:'#00795E'
				}">獲得傭金記錄</text>
				<text>提現傭金記錄</text>
			</view>
			<view class="body_2" v-for="(item,index) in 5">
				<view class="body_2_1">
					<text>邀請註冊成功</text>
					<text>2021-06-31</text>
				</view>
				<view class="body_2_2">
					<image src="https://junhe-project.oss-cn-beijing.aliyuncs.com/img/2022-03-08/164672788920089.png" />
					<text>
						<text style="font-size: 20rpx">¥</text>
						100</text>
				</view>
			</view>

		</view>
		<!-- //获取积分 -->
		<u-mask :show="show" @click="show = false">
			<view class="warp">
				<view class="warp_1">
					<view class="rect" @tap.stop>
						<view class="rect_1">
							获取积分
						</view>
						<view class="rext_2">
							<text>邀請註冊</text>
							<text>去獲取</text>
						</view>
						<view class="rext_2">
							<text>邀請註冊</text>
							<text>去獲取</text>
						</view>
						<view class="rext_2">
							<text>邀請註冊</text>
							<text>去獲取</text>
						</view>
						<view class="rext_2">
							<text>邀請註冊</text>
							<text>去獲取</text>
						</view>
					</view>
					<image @click="show=false"
						src="https://junhe-project.oss-cn-beijing.aliyuncs.com/img/2022-03-08/164672154631126.png" />
				</view>
			</view>
		</u-mask>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				show: false
			};
		}
	}
</script>

<style lang="scss">
	.sx {
		margin-top: 50rpx;
		margin-bottom: 50rpx;
		height: 80rpx;
		background: #00795E;
		border-radius: 40rpx;
		text-align: center;
		line-height: 80rpx;
		font-size: 30rpx;
		font-family: Source Han Serif CN;
		font-weight: 600;
		color: #FFFFFF;
	}

	.warp {
		display: flex;
		align-items: center;
		justify-content: center;
		height: 100%;

		.warp_1 {
			image {
				display: block;
				margin: 20rpx auto;
				width: 64rpx;
				height: 64rpx;
			}
		}

		.rect {
			width: 590rpx;
			height: 543rpx;
			background: #FFFFFF;
			border-radius: 10rpx;

			.rext_2 {
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 0 30rpx 20rpx 30rpx;

				text:nth-of-type(1) {
					font-size: 28rpx;
					font-family: Source Han Sans CN;
					font-weight: 400;
					color: #181818;
				}

				text:nth-of-type(2) {
					width: 180rpx;
					height: 70rpx;
					background: #00795E;
					border-radius: 35rpx;
					text-align: center;
					line-height: 70rpx;
					font-size: 28rpx;
					font-family: Source Han Sans CN;
					font-weight: 400;
					color: #FFFFFF;

				}
			}

			.rect_1 {
				display: block;
				padding-top: 30rpx;
				padding-bottom: 30rpx;
				width: 590rpx;
				border-bottom: 1rpx solid #EEEEEE;
				text-align: center;
				font-size: 32rpx;
				font-family: Source Han Sans CN;
				font-weight: 500;
				margin-bottom: 30rpx;
				color: #181818;

			}
		}
	}


	.body {
		background: #FFFFFF;
		margin-top: 30rpx;
		border-radius: 10rpx;

		.body_2 {
			display: flex;
			align-items: center;
			padding-left: 30rpx;
			padding-right: 30rpx;
			justify-content: space-between;
			height: 150rpx;
			border-bottom: 1px solid #EDEDED;

			.body_2_2 {
				display: flex;
				align-items: center;

				text {
					font-size: 30rpx;
					font-family: Source Han Serif CN;
					font-weight: 500;
					color: #181818;
					margin-left: 5rpx;
				}

				image {
					width: 40rpx;
					height: 40rpx;
				}
			}

			.body_2_1 {
				text:nth-of-type(1) {
					display: block;
					font-size: 32rpx;
					font-family: Source Han Serif CN;
					font-weight: 500;
					color: #000000;

				}

				text:nth-of-type(2) {
					display: inline-block;
					margin-top: 10rpx;
					font-size: 26rpx;
					font-family: Source Han Serif CN;
					font-weight: 400;
					color: #999999;
				}
			}
		}

		.body_1 {
			border-bottom: 1rpx solid #F1F1F1;

			text:nth-of-type(1) {
				display: inline-block;
				width: 50%;
				height: 100rpx;
				line-height: 100rpx;
				text-align: center;
				border-right: 1rpx solid #F1F1F1;
				font-size: 28rpx;
				font-family: Source Han Serif CN;
				font-weight: 600;
				color: #666666;

			}

			text:nth-of-type(2) {
				display: inline-block;
				width: 50%;
				height: 100rpx;
				line-height: 100rpx;
				text-align: center;
				font-size: 28rpx;
				font-family: Source Han Serif CN;
				font-weight: 600;
				color: #666666;

			}
		}

	}

	.carp {
		position: relative;
		padding: 30rpx;
		height: 270rpx;
		background-size: 100% 100%;
		background-repeat: no-repeat;
		background-image: url(https://junhe-project.oss-cn-beijing.aliyuncs.com/img/2022-03-08/164672528127174.png);

		.carp2 {
			bottom: 0rpx;
			width: 100%;
			padding: 30rpx;
			border-top: 1rpx solid rgba($color: #FFFFFF, $alpha: 0.2);
			left: 0;
			position: absolute;
			display: flex;
			justify-content: space-between;

			text {
				font-size: 24rpx;
				font-family: Source Han Serif CN;
				font-weight: 500;
				color: #FFFFFF;
				opacity: 0.8;
			}
		}

		.carp_1 {
			display: flex;
			justify-content: space-between;
			align-items: center;

			.carp_1_4 {
				width: 172rpx;
				height: 60rpx;
				background: #FFFFFF;
				border-radius: 30rpx;
				text-align: center;
				line-height: 60rpx;
				font-size: 28rpx;
				font-family: Source Han Serif CN;
				font-weight: 600;
				color: #00795E;
			}

			.carp_1_3 {
				margin-left: 20rpx;

				text:nth-of-type(1) {
					font-size: 28rpx;
					font-family: Source Han Serif CN;
					font-weight: 500;
					color: #FFFFFF;
					display: block;
				}

				text:nth-of-type(2) {
					font-size: 48rpx;
					font-family: Source Han Serif CN;
					font-weight: bold;
					color: #FFFFFF;

				}
			}

			.carp_1_2 {
				display: flex;
				margin-top: 20rpx;
				align-items: center;

				image {
					width: 98rpx;
					height: 98rpx;
				}
			}
		}
	}
</style>
